<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.6.12.js"></script>
</head>
<body>
    <div id="app">
		<child type="text" title="账号" v-model="username"></child>
		<button type="button" @click="sub">提交</button>
		<button type="button" @click="reset">重置</button>
    </div>
</body>
<script>
	var bus=new Vue();
	Vue.component("child",{
		props:['type','title','value'],
		template:`
			<div>	
				<label>{{title}}</label>
				<input type="type" :value="value" @input="change" />
			</div>
		`,
		methods:{
			change(evt){
				bus.$emit('cinpt',evt.target.value);
			}
		}
	});
	
	
    var vm = new Vue({
        el:'#app',
        data:{
            username:'',
        },
		methods:{
			sub(){
				console.log(this.username);
			},
			
			reset(){
				this.username=''
			}
		},
   
		mounted() {
			bus.$on('cinpt',(data)=>{
				this.username=data;
			});
		}
    });

</script>
</html>